<template>
  <el-card shadow="never" header="修改密码">
    <el-alert title="密码更新成功后，您将被重定向到登录页面，您可以使用新密码重新登录。" type="info" show-icon style="margin-bottom: 15px" />
    <el-form ref="form" :model="form" :rules="rules" label-width="120px" style="margin-top: 20px">
      <el-form-item label="当前密码" prop="userPassword">
        <el-input v-model="form.userPassword" type="password" show-password placeholder="请输入当前密码"></el-input>
        <div class="el-form-item-msg">必须提供当前登录用户密码才能进行更改</div>
      </el-form-item>
      <el-form-item label="新密码" prop="newPassword">
        <el-input v-model="form.newPassword" type="password" show-password placeholder="请输入新密码"></el-input>
        <sc-password-strength v-model="form.newPassword"></sc-password-strength>
        <div class="el-form-item-msg">请输入包含英文、数字的8位以上密码</div>
      </el-form-item>
      <el-form-item label="确认新密码" prop="confirmNewPassword">
        <el-input v-model="form.confirmNewPassword" type="password" show-password placeholder="请再次输入新密码"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="save">保存密码</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
import scPasswordStrength from '@/components/scPasswordStrength'

export default {
  components: {
    scPasswordStrength,
  },
  data() {
    return {
      form: {
        userPassword: '',
        newPassword: '',
        confirmNewPassword: '',
      },
      rules: {
        userPassword: [{ required: true, message: '请输入当前密码' }],
        newPassword: [{ required: true, message: '请输入新密码' }],
        confirmNewPassword: [
          { required: true, message: '请再次输入新密码' },
          {
            validator: (rule, value, callback) => {
              if (value !== this.form.newPassword) {
                callback(new Error('两次输入密码不一致'))
              } else {
                callback()
              }
            },
          },
        ],
      },
    }
  },
  methods: {
    save() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$alert('密码修改成功，是否跳转至登录页使用新密码登录', '修改成功', {
            type: 'success',
            center: true,
          })
            .then(() => {
              this.$router.replace({
                path: '/login',
              })
            })
            .catch(() => {})
        } else {
          return false
        }
      })
    },
  },
}
</script>

<style></style>
